<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="日志ID">
              <a-input placeholder="请输入日志ID" v-model="queryParam.logId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="日志接口类型">
              <a-select v-model="queryParam.logType" placeholder="请选择日志接口类型">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="72001">首页轮播图</a-select-option>
                <a-select-option value="72002">首页导航</a-select-option>
                <a-select-option value="72003">首页滚动新闻</a-select-option>
                <a-select-option value="72004">首页滚动新闻</a-select-option>
                <a-select-option value="72012">微信登录</a-select-option>
                <a-select-option value="72013">微信授权更新</a-select-option>
                <a-select-option value="72014">虚拟换妆DIY</a-select-option>
                <a-select-option value="72015">虚拟换妆</a-select-option>
                <a-select-option value="72016">人脸融合DIY</a-select-option>
                <a-select-option value="72017">人脸融合</a-select-option>
                <a-select-option value="72018">痘斑痣检测</a-select-option>
                <a-select-option value="72019">皮肤光滑度</a-select-option>
                <a-select-option value="72020">肤色检测</a-select-option>
                <a-select-option value="72021">皱纹检测</a-select-option>
                <a-select-option value="72022">黑眼圈眼袋检测</a-select-option>
                <a-select-option value="72023">垃圾分类检测</a-select-option>
                <a-select-option value="72024">图片融合检测</a-select-option>
                <a-select-option value="72025">图片背景色替换</a-select-option>
                <a-select-option value="72026">手相分析</a-select-option>
                <a-select-option value="72027">手相分析V2</a-select-option>
                <a-select-option value="72028">图像违规检测</a-select-option>
                <a-select-option value="72029">中草药检测</a-select-option>
                <a-select-option value="72031">手相分析(线)</a-select-option>
                <a-select-option value="72032">人脸变老</a-select-option>
                <a-select-option value="72033">我的动物脸</a-select-option>
                <a-select-option value="72034">性别反转</a-select-option>
                <a-select-option value="72035">五官分析</a-select-option>
                <a-select-option value="72036">累首天数</a-select-option>
                <a-select-option value="72037">图片转字符画</a-select-option>
                <a-select-option value="72038">图像识别</a-select-option>
                <a-select-option value="72039">图像处理</a-select-option>
                <a-select-option value="72040">人脸检测</a-select-option>
                <a-select-option value="72041">手表识别</a-select-option>
                <a-select-option value="72042">穿衣搭配</a-select-option>
                <a-select-option value="72043">颜色识别</a-select-option>
                <a-select-option value="72044">飞桨闲聊</a-select-option>
                <a-select-option value="72045">小跟班机器人</a-select-option>
                <a-select-option value="72046">街景动漫化</a-select-option>
                <a-select-option value="72049">秃头模型</a-select-option>
                <a-select-option value="72047">秃头海报</a-select-option>
                <a-select-option value="72048">街景海报</a-select-option>
                <a-select-option value="72050">圣诞模型</a-select-option>
                <a-select-option value="72051">圣诞海报</a-select-option>
                <a-select-option value="72052">小红花</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'litelog:add'">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('API日志记录表')" v-has="'litelog:export'">导出
      </a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel" v-has="'litelog:import'">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">查看详情</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <liteApiLog-modal ref="modalForm" @ok="modalFormOk"></liteApiLog-modal>
  </a-card>
</template>

<script>
  import LiteApiLogModal from './modules/LiteApiLogModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: "LiteApiLogList",
    mixins: [JeecgListMixin],
    components: {
      LiteApiLogModal
    },
    data() {
      return {
        description: 'API日志记录表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '用户ID',
            align: "center",
            dataIndex: 'userId'
          },
          {
            title: '请求的IP',
            align: "center",
            dataIndex: 'requestIp'
          },
          {
            title: '请求的URL',
            align: "center",
            dataIndex: 'requestUrl'
          },
          {
            title: '日志接口类型',
            align: "center",
            dataIndex: 'logType',
            customRender: function (text) {
              if(text=='72001'){
                return "首页轮播图";
              }
              if(text=='72002'){
                return "首页导航";
              }
              if(text=='72003'){
                return "首页滚动新闻";
              }
              if(text=='72004'){
                return "刷新文案";
              }
              if(text=='72012'){
                return "微信登录";
              }
              if(text=='72013'){
                return "微信授权更新";
              }
              if(text=='72014'){
                return "虚拟换妆DIY";
              }
              if(text=='72015'){
                return "虚拟换妆";
              }
              if(text=='72016'){
                return "人脸融合DIY";
              }
              if(text=='72017'){
                return "人脸融合";
              }
              if(text=='72018'){
                return "痘斑痣检测";
              }
              if(text=='72019'){
                return "皮肤光滑度";
              }
              if(text=='72020'){
                return "肤色检测";
              }
              if(text=='72021'){
                return "皱纹检测";
              }
              if(text=='72022'){
                return "黑眼圈眼袋检测";
              }
              if(text=='72023'){
                return "垃圾分类检测";
              }
              if(text=='72024'){
                return "图片融合检测";
              }
              if(text=='72025'){
                return "图片背景色替换";
              }
              if(text=='72026'){
                return "手相分析";
              }
              if(text=='72027'){
                return "手相分析V2";
              }
              if(text=='72028'){
                return "图像违规检测";
              }
              if(text=='72029'){
                return "中草药检测";
              }
              if(text=='72030'){
                return "PP口罩检测";
              }
              if(text=='72031'){
                return "手相分析(线)";
              }
              if(text=='72032'){
                return "人脸变老";
              }
              if(text=='72033'){
                return "我的动物脸";
              }
              if(text=='72034'){
                return "性别反转";
              }
              if(text=='72035'){
                return "五官分析";
              }
              if(text=='72036'){
                return "累首天数";
              }
              if(text=='72037'){
                return "图片转字符画";
              }
              if(text=='72038'){
                return "图像识别";
              }
              if(text=='72039'){
                return "图像处理";
              }
              if(text=='72040'){
                return "人脸检测";
              }
              if(text=='72041'){
                return "手表识别";
              }
              if(text=='72042'){
                return "穿衣搭配";
              }
              if(text=='72043'){
                return "颜色识别";
              }
              if(text=='72044'){
                return "飞桨闲聊";
              }
              if(text=='72045'){
                return "小跟班机器人";
              }
              if(text=='72046'){
                return "街景动漫化";
              }
              if(text=='72047'){
                return "秃头海报";
              }
              if(text=='72048'){
                return "街景海报";
              }
              if(text=='72049'){
                return "秃头模型";
              }
              if(text=='72050'){
                return "圣诞模型";
              }
              if(text=='72051'){
                return "圣诞海报";
              }
              if(text=='72052'){
                return "小红花";
              }
            }
          },
          {
            title: '耗时(ms)',
            align: "center",
            dataIndex: 'timeConsuming'
          },
          {
            title: '记录时间',
            align: "center",
            dataIndex: 'createTime',
            sorter: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: {
          list: "/log/liteApiLog/list",
          delete: "/log/liteApiLog/delete",
          deleteBatch: "/log/liteApiLog/deleteBatch",
          exportXlsUrl: "log/liteApiLog/exportXls",
          importExcelUrl: "log/liteApiLog/importExcel",
        },
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {}
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>